<template>
    <div class="login">
        <img src="../assets/imgs/login_page_logo@2x.png" class="logo-icon" />
        <van-cell-group>
            <van-field :left-icon="imgName" v-model="user.phone" type="tel"  clearable  placeholder="请输入手机号"/>
            <van-field :left-icon="imgPassword" v-model="user.password" type="password" placeholder="请输入密码"/>
            <span style="position:absolute;bottom: -0.25rem;font-size: ;color: red">{{errMsg}}</span>
        </van-cell-group>
        <div style="text-align: center">
            <van-button type="primary" size="large" @click="login" style="border: none;" :disabled="loading" :loading="loading" loading-text="登录中...">登录</van-button>
        </div>
    </div>
</template>
<script>
    import {Notify,Cell,CellGroup,Button,Toast} from 'vant';
    import '../api.js';

    export default {
        name: "login",
        components: {
            [Notify.name]: Notify,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Toast.name]: Toast,
            [Button.name]: Button
        },
        data() {
            return {
                loading: false,
                errMsg: '',
                user: {
                    phone: '',
                    password: ''
                },
                imgName: require('../assets/imgs/login_page_username@2x.png'),
                imgPassword: require('../assets/imgs/login_page_password@2x.png')
            }
        },
        // created() {
        //     apiready=function(){
        //         this.back();
        //     }
        // },
        mounted() {
            let _this = this;
            // // window.apiready = function() {
            setTimeout(()=>{
                _this.back();
            },1000)

            // }

        },
        destroyed() {
            api.removeEventListener({
                name: 'keyback'
            });
        },
        methods: {
            back() {
                api.addEventListener({
                    name: 'keyback'
                }, function (ret, err) {
                    api.closeWidget({
                        silent: true
                    });
                });

            },
            login() {
                let params
                if (!(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(this.user.phone))) {
                    Toast('请输入正确手机号');
                    return;
                } else if (!this.user.password) {
                    Toast('请输入密码');
                    return;
                } else {
                    this.loading = true;
                    params = {
                        mobile: this.user.phone,
                        password: this.user.password
                    };
                    this.$http.post('auth/loginToShow',params)
                        .then((result) => {
                            if (result.status_code == 200) {
                                localStorage.setItem('token',result.data.token);
                                localStorage.setItem('userInfo',JSON.stringify(result.data.userInfo));
                                localStorage.setItem('tr_id',result.data.userInfo.bindResort.tr_id);
                                localStorage.setItem('tr_name',result.data.userInfo.bindResort.tr_name);
                                this.$router.push({name:'index'});
                            }else {
                                this.errMsg = result.msg;
                                // Notify({
                                //     message: result.msg,
                                //     duration: 1000,
                                //     background: '#ff0000'
                                // })
                            }
                            this.loading = false;
                        })

                }

            }
        }
    }
</script>
<style lang="less">
    .login{
        .van-field__left-icon {
            display: flex ;
            flex-direction: column ;
            justify-content: center ;
        }
    }
</style>
<style scoped lang="less">
    .login {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        flex: 1;
        background:#fff url("../assets/imgs/login_page_shading@2x.png") bottom right no-repeat;
        background-size: 50% 40%;
        img {
            width:2rem;
            height:0.43rem;
            display: block;
            margin: 1rem auto 0.5rem;
        }
        .van-button{
            margin-top: 0.4rem;
            width: 2.85rem;
            height: 0.44rem;
            line-height: 0.44rem;
            font-size: 0.15rem;
        }
        .van-button--primary{
            background:rgba(66,108,255,1);
            box-shadow:0px 0.08rem 0.24rem 0px rgba(66,108,255,0.3);
        }
        .van-cell-group{
            width: 2.85rem;
            margin:0 auto;
        }
        .van-cell{
            padding:0.1rem 0.21rem;
            border: 1px solid rgba(235, 237, 244, 1);
            border-bottom: none;

        }
        .van-cell:nth-of-type(1){
            border-bottom: none;
        }
        .van-cell:nth-of-type(2){
            /*border-bottom: none;*/
            border-top: none;
        }
        .van-cell:not(:last-child)::after{
            left: 0px;
        }
        .van-hairline--top-bottom::after{
            border-width: 0px;
        }

    }
</style>